<template>
  <section class="profile-base-info" @click="handleSkipInfo">
    <img
      :src="`http://elm.cangdu.org/img/${baseInfo.avatar}`"
      alt=""
      v-if="isShow"
    />
    <svg class="svg-avatar" v-if="!isShow">
      <use xlink:href="#default-avatar" />
    </svg>
    <div class="center">
      <p class="name" v-show="isShow">{{ baseInfo.username }}</p>
      <p class="name" v-show="!isShow">登录/注册</p>
      <p class="phone">
        <svg class="svg">
          <use xlink:href="#phone" />
        </svg>
        <span> 暂无绑定手机号</span>
      </p>
    </div>
    <div class="right"></div>
  </section>
</template>

<script>
import {
  getNearby,
  getAddressesInfo,
  getAddresses,
  deleteAddresses,
  getSignOut,
} from "network/profile";

import {
  SET_ADDRESSES,
  DELETE_ADDRESSES,
  ADD_ADDRESSES,
} from "store/mutations.type";
export default {
  data() {
    return {
      isShow: false,
      nearby: [], // addDetail关键词查询附近
    };
  },
  props: {
    baseInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {
    this.$bus.$on("handleSearchNearby", (res) => {
      this.getNearby(res);
    });

    this.$bus.$on("handleAddButton", (res) => {
      this.getAddressesInfo(localStorage.getItem("user_id"), res);
      this.$store.commit(ADD_ADDRESSES, res);
    });

    this.getAddresses(localStorage.getItem("user_id"));

    this.$bus.$on("handleDeleteAddresses", (id) => {
      this.deleteAddresses(localStorage.getItem("user_id"), id);
      this.$store.commit(DELETE_ADDRESSES, id);
    });

    this.$bus.$on("handleSignOutLogin", () => {
      this.getSignOut();
    });
  },
  watch: {
    nearby(value) {
      this.$bus.$emit("nearby", value);
    },
  },
  activated() {
    this.isShow = localStorage.getItem("user_id") ? true : false;
  },
  deactivated() {},
  methods: {
    getAddressesInfo(user_id, data) {
      getAddressesInfo(user_id, data).then((res) => {
        res.status === 1 ? this.$router.go(-1) : "";
      });
    },
    // addDetail关键词查询附近
    getNearby(keyword) {
      getNearby(keyword).then((res) => {
        this.nearby = res;
      });
    },
    getAddresses(user_id) {
      getAddresses(user_id).then((res) => {
        this.$store.commit(SET_ADDRESSES, res);
      });
    },
    deleteAddresses(user_id, adress_id) {
      deleteAddresses(user_id, adress_id).then((res) => {
        res.status === 1 ? this.$toast.handleTipsText("删除失败") : "";
      });
    },
    getSignOut() {
      getSignOut().then((res) => {
        if (res.status === 1) {
          localStorage.removeItem("user_id");
          this.$router.push("/profile");
          this.isShow = false;
        }
      });
    },

    handleSkipInfo() {
      let path = !this.isShow ? "/login" : "/profile/info";
      this.$router.push(path);
      !this.isShow ? "" : this.$bus.$emit("getUser", this.baseInfo);
    },
  },
};
</script>
<style lang="less" scoped>
.profile-base-info {
  display: flex;
  align-items: center;
  padding: 15px;
  border-top: 1px solid #61a8eb;
  background-color: #3190e8;
  color: #ffffff;
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .svg-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
  }
  .center {
    flex: 1;
    margin: 0 10px;
    .name {
      margin-bottom: 5px;
      font-size: 18px;
    }
    .phone {
      position: relative;
      font-size: 13px;
      span {
        margin-left: 15px;
      }
      .svg {
        position: absolute;
        top: 50%;
        width: 15px;
        height: 15px;
        transform: translateY(-50%);
      }
    }
  }
  .right {
    width: 6px;
    height: 6px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
  }
}
</style>